frontend/pages/e/[uuid]/options.tsx (view raw)
1import Box from '@mui/material/Box';
2import Container from '@mui/material/Container';
3import {useTheme} from '@mui/material/styles';
4import {PropsWithChildren} from 'react';
5import pageUtils from '../../../lib/pageUtils';
6import useEventStore from '../../../stores/useEventStore';
7import EventLayout, {TabComponent} from '../../../layouts/Event';
8import {
9 EventByUuidDocument,
10 Module,
11 ModuleDocument,
12 Enum_Userspermissionsuser_Lang as SupportedLocales,
13} from '../../../generated/graphql';
14import CarosterPlusOption from '../../../containers/CarosterPlusOption';
15import CarosterPlusSettings from '../../../containers/CarosterPlusSettings';
16
17interface Props {
18 modulesSettings?: Module;
19 eventUUID: string;
20 announcement?: string;
21}
22
23const Page = (props: PropsWithChildren<Props>) => {
24 return <EventLayout {...props} Tab={OptionsTab} />;
25};
26
27const OptionsTab: TabComponent<Props> = ({modulesSettings}) => {
28 const theme = useTheme();
29 const event = useEventStore(s => s.event);
30
31 if (!event) return null;
32
33 const carosterPlusActivated =
34 event.enabled_modules?.includes('caroster-plus');
35
36 return (
37 <Box position="relative">
38 <Container
39 sx={{
40 p: 4,
41 mt: 6,
42 mb: 11,
43 mx: 0,
44 [theme.breakpoints.down('md')]: {
45 p: 2,
46 },
47 }}
48 >
49 {carosterPlusActivated && <CarosterPlusSettings event={event} />}{' '}
50 {modulesSettings && !carosterPlusActivated && (
51 <CarosterPlusOption event={event} modulesSettings={modulesSettings} />
52 )}
53 </Container>
54 </Box>
55 );
56};
57
58export const getServerSideProps = pageUtils.getServerSideProps(
59 async (context, apolloClient) => {
60 const {uuid} = context.query;
61 const {host = ''} = context.req.headers;
62 let event = null;
63 let modulesSettings = null;
64
65 // Fetch event
66 try {
67 const {data} = await apolloClient.query({
68 query: EventByUuidDocument,
69 variables: {uuid},
70 });
71 event = data?.eventByUUID?.data;
72 } catch (error) {
73 return {
74 notFound: true,
75 };
76 }
77
78 // Fetch modules settings
79 try {
80 const {data} = await apolloClient.query({
81 query: ModuleDocument,
82 variables: {locale: context.locale},
83 });
84 modulesSettings = data?.module?.data?.attributes || {};
85
86 const {caroster_plus_description, caroster_plus_name} = modulesSettings;
87
88 if (
89 caroster_plus_description &&
90 caroster_plus_name &&
91 String(caroster_plus_description).length === 0 &&
92 String(caroster_plus_name).length === 0
93 ) {
94 console.warn(
95 'Module settings are not set for locale: ',
96 context.locale,
97 ' fallback to English'
98 );
99 const {data: enData} = await apolloClient.query({
100 query: ModuleDocument,
101 variables: {locale: SupportedLocales['en']},
102 });
103 modulesSettings = enData?.module?.data?.attributes;
104 }
105 } catch (error) {
106 console.error(error);
107 }
108
109 return {
110 props: {
111 modulesSettings,
112 eventUUID: uuid,
113 metas: {
114 title: event?.attributes?.name || '',
115 url: `https://${host}${context.resolvedUrl}`,
116 },
117 },
118 };
119 }
120);
121export default Page;